<template>
  <div class="Footer-box jy-style-height" :class="getId() == 615265577537605 && 'Footer-box2'">
    <img
      class="Footer-bg jy-style-height"
      :src="publicUrls + 'free/style11/footerStyle3Bg.png' + '?imageView2/3/format/webp'"
      alt=""
      v-if="getId() == 615265577537605"
    />
    <img
      class="Footer-bg2 jy-style-height"
      :src="publicUrls + 'free/style11/footerStyle1Bg.png' + '?imageView2/3/format/webp'"
      alt=""
      v-if="bgFlag && getId() !== 615265577537605"
    />
    <img
      class="Footer-bg2 jy-style-height"
      :src="publicUrls + 'free/style11/footerStyle2Bg.png' + '?imageView2/3/format/webp'"
      alt=""
      v-else-if="getId() !== 615265577537605"
    />
    <div class="Footer-content">
      <t-upload
        v-if="!route.meta.loopType"
        ref="uploadRef3"
        :before-upload="beforeUpload"
        theme="custom"
        accept=".png,.jpg,.jpeg"
        :auto-upload="true"
        :upload-all-files-in-one-request="uploadAllFilesInOneRequest"
        @fail="handleFail"
      >
        <div class="content-logo">
          <img :src="urls + store.styleInfo.logo" alt="" v-if="store.styleInfo?.logo" />
          <span v-else>请上传LOGO图片</span>
        </div>
      </t-upload>
      <div class="content-logo" @click="toHome(0)" v-else>
        <img :src="urls + store.styleInfo.logo" alt="" v-if="store.styleInfo?.logo" />
      </div>
      <!-- <div class="content-list">
        <div v-for="(item, index) in props.tabList" :key="item.id"> 
          <div class="menu-item" v-if="item.isShow">
            <router-link
              :class="{
                'item-mg': index === '0',
              }"
              class="item"
              :to="{ name: route.meta.loopType ? item.linkLoop : item.link }"
              :style="{ marginTop: index === '0' ? '0px' : '' }"
            >
              <iconTab :color="'rgba(254, 243, 223, 1)'" :id="item.id" :colorType="true" />
              <span @click="toHome(index)">{{ item.name }}</span>
            </router-link>
          </div>
        </div>
      </div> -->
      <!-- <div class="content-door" @click="toWeb">
        <i class="iconfonts">&#xe6dd;</i>
        <span>永不落幕的展览与展示平台</span>
      </div> -->
      <a :href="store.isMobileType ? doorUrl + 'wap/home' : doorUrl" class="content-door" v-if="route.meta.loopType">
        <i class="iconfonts">&#xe6dd;</i>
        <span>永不落幕的展览与展示平台</span>
      </a>
      <div class="content-door" v-else>
        <i class="iconfonts">&#xe6dd;</i>
        <span>永不落幕的展览与展示平台</span>
      </div>
    </div>
  </div>
</template>  

<script lang="ts">
export default defineComponent({
  name: 'style11',
});
</script>
   
<script setup lang="ts">
import { url, heards, urls } from '@/utils/request/upload';
import iconTab from '../../freeIconComponent/footerIcon.vue';
import { useRoute } from 'vue-router';
// import FooterIcon from '../../freeIconComponent/footerIcon.vue';
import { doorUrl, publicUrls } from '@/utils/minxin';
import { commonDataStore } from '@/store';
import { useProjectStore } from '@/store';
import { ref, watch, nextTick, defineComponent, computed } from 'vue';
import COS from 'cos-js-sdk-v5';
import { updateProject } from '@/api/project/project';

import { getCloud } from '@/api/upLoad/index';
import { upLoadFn } from '@/utils/request/upload';
import getId from '@/utils/getId';

const uploadAllFilesInOneRequest = ref(false);

// 'icon-hover-active': route.meta.isActive === item.id,
const props = defineProps({
  tabList: {
    type: Object,
  },
});

const logoshow = ref(false); //logo上传状态判断

const route = useRoute();
const commonStore = commonDataStore();
const store = useProjectStore();
// 跳转官网
const toWeb = () => {
  window.open(doorUrl, '_blank');
};
// 回到首页
const toHome = (index: number) => {
  if (index == 0) {
    const el = document.getElementById('edit-scroll-box');
    // store.bannerShow = false;
    // store.bannerLock = false;
    setTimeout(() => {
      el.scrollTo({
        left: 0,
      });
    }, 20);
  }
};
const handleFail = (e: any) => {};
const beforeUpload = (file: any) => {
  //回调钩子
  console.log(file.size);

  if (file.type.indexOf('image/') == -1) {
    MessagePlugin.error('文件类型错误');
    return;
  }
  if (
    file.type !== 'image/gif' &&
    file.type !== 'image/png' &&
    file.type !== 'image/jpeg' &&
    file.type !== 'image/jpg' &&
    file.type !== 'image/bmp'
  ) {
    MessagePlugin.error('上传文件格式错误');
    return;
  }
  if (file.size > 500 * 1024) {
    MessagePlugin.error('上传大小超出500k限制');
    return;
  }
  logoshow.value = true;
  upLoadFn(file, 5).then((res: any) => {
    // console.log(res);
    if (res) {
      store.setLogo(res);
      // formData.coverUrl = res;
      updateProject({ logoUrl: res }, localStorage.getItem('projectId')).then((res) => {
        // console.log(res, 'res-----');
      });
    } else {
      MessagePlugin.error('创建成功');
    }
    logoshow.value = false;
  });
};

const bgFlag = computed(() => {
  return store.templateMOdeList?.length >= 6;
});
</script>  
  
<style scoped lang="less">
.Footer-box {
  position: relative;
  width: 360px;
  padding-left: 95px;
}
.Footer-box2 {
  width: 260px;
  position: relative;
}
.Footer-bg2 {
  width: 360px;
  position: absolute;
  top: 0;
  left: 0;
}
.Footer-bg {
  width: 260px;
  // width: 360px;
  position: absolute;
  top: 0;
  left: 0;
}
.Footer-content {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 11;
  display: flex;
  align-items: start;
  justify-content: center;
  padding-left: 15px;
}
.content-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 50px;
  margin-top: 200px;
  img {
    max-width: 200px;
    max-height: 50px;
    width: auto;
    height: auto;
    object-fit: contain;
  }
  span {
    text-align: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 18px;
    color: rgba(254, 243, 223, 1);
    line-height: 28px;
  }
}
.content-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 90px;
  flex: 1;
}
.menu-item {
  width: 100%;
  height: 32px;
  margin-top: 20px;
}
.item-mg {
  margin-top: 0;
}

.item {
  display: flex;
  align-items: center;
  opacity: 0.8;
  &:hover {
    opacity: 1;
    span {
      text-decoration: underline;
    }
  }
  .freeIcon {
    color: rgba(254, 243, 223, 1);
    font-size: 20px !important;
  }
  span {
    font-family: PingFangSC;
    font-size: 16px;
    line-height: 32px;
    color: rgba(254, 243, 223, 1);
    margin-left: 4px;
  }
}
.content-door {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 168px;
  height: 50px;
  position: absolute;
  bottom: 60px;
  .iconfonts {
    font-size: 24px;
    color: #fff3d2;
    margin-bottom: 4px;
    line-height: 26px;
  }
  span {
    font-family: PingFang SC;
    font-size: 14px;
    line-height: 22.4px;
    color: #fff3d2;
  }
}
</style>